<template>
  <div class="box">
    <div v-if="!isSuccess">
           <div class="font-bold text-3xl ml-[30px]">學生資料信息填寫!</div>
    <!-- <ProForm ref="dialogForm" :config="addeditConfig" :echo="echo"></ProForm> -->
    <el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef" class="mt-7">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="學生名稱" prop="name"><el-input v-model="form.name" /></el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="手機號碼" prop="mobile"><el-input v-model="form.mobile" /></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="聯絡人" prop="contact">
            <el-button  class="button"  color="#F7B32B" type="primary" icon="Plus" @click="addPerson" >聯絡人</el-button>
            <div class="flex items-center">
            <div v-for="(value, index) in contact" :key="index" class="flex items-center ml-[10px]"><el-icon><User /></el-icon>{{value.name}}</div>
            </div>
          </el-form-item>
        </el-col>

         <el-col :span="8">
          <el-form-item label="登錄名" prop="username"><el-input v-model="form.username" /></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="密碼" prop="password" type="password"><el-input v-model="form.password" /></el-form-item>
        </el-col>


        <el-col :span="8">
          <el-form-item label="電子郵箱" prop="email"><el-input v-model="form.email" /></el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="地址" prop="address"><el-input v-model="form.address" /></el-form-item>
        </el-col>


        <el-col :span="8">
          <el-form-item label="英文名" prop="ename"><el-input v-model="form.ename" /></el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="來源" prop="source"><el-input v-model="form.source" /></el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="備註" prop="remark"><el-input v-model="form.remark" /></el-form-item>
        </el-col>
         <el-col :span="8">
          <el-form-item label="性別" prop="sex">
              <el-select  v-model="form.sex"  size="default" >
                <el-option v-for="item in sexOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="狀態" prop="status">
            <el-select  v-model="form.status"  size="default" >
              <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="调课次数" prop="num"><el-input v-model="form.num" /></el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="生日" prop="birthday">
                <el-date-picker  v-model="form.birthday" value-format="YYYY-MM-DD" type="date" placeholder="Pick a day"  size="default" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="身份證" prop="identity"><el-input v-model="form.identity" /></el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="學生類型" prop="student_type_id">
              <el-select  v-model="form.student_type_id"  size="default" >
                <el-option v-for="item in studentTypeList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="學歷" prop="education"><el-input v-model="form.education" /></el-form-item>
        </el-col>

        <!-- <el-col :span="8">
          <el-form-item label="与学生关系" prop="relation"><el-input v-model="form.relation" /></el-form-item>
        </el-col> -->
           <el-col :span="8">
          <el-form-item label="卡號" prop="card_number"><el-input v-model="form.card_number" /></el-form-item>
        </el-col>

        <!-- <el-col :span="8"> -->

        <!-- </el-col> -->
      </el-row>
    </el-form>
          <div class="mt-[20px] pl-[40px] w-[100%]" >
              <el-button type="primary" @click="confirm(ruleFormRef,buttonType)" color="#081F42">確定</el-button>
               <div style="font-size: 12px;color:#00AAFF;text-decoration:underline">點擊提交按鈕,即同意以下學生入學守則</div>
           </div>
          <el-row>
        <el-col :span="24">
          <div
            style="height: 200px;overflow-y: scroll;margin: 20px;border-radius: 10px;padding:10px; background-color: #EEEEEE;font-size: 14px;line-height: 25px;">
            <h3>學員入學守則</h3>
            A.基本守則 <br />
           1. 新學員報讀 Inline 課程需繳交報名費$50,學費及報名費⽤⼀經繳交,恕不退款。<br />
2. 每位新報讀的學員均會獲得電⼦學員證⼀張,學員證⽤作上課點名之⽤。如有遺失,請通知校務處辦理 補領,學員需繳交補領費⽤ $20。<br />
3. 敬請學員妥善保管學費收據,以保障個⼈權益。<br />
4. 每次上課時,需攜帶學員⼿冊,⼿冊如有遺失或⽤完必須補購,及繳交$20購買。<br />
5. 家長陪同上課,每堂另加收$30(親⼦課程除外)<br />
6. 課程需每⽉銜接,如中途退學後再報讀課程,須重新繳交$50報名費。(若學員因事⽽需請假⼀個⽉或以 上,則需繳交4堂學費作留位費,並可豁免重新報讀之$50報名費)<br />
7. 學員須參與本公司之校內評估,評估合格後將會升級,評估準則會以國際考試範圍程度為標準（本院每 級課程為期⼤約半年⾄⼀年,因應個⼈學習進度⽽定）<br />
8. 請學員珍惜使⽤場地及設備,如有損壞,請照價賠償。<br />
9. 本公司有權調整各課程之收費,恕不另⾏通知。<br />
10. 本公司有權使⽤閣下於本公司學習期間、所參與之活動、考試及比賽成績、相⽚、影⽚,演奏會表演等 資料作為市場推廣活動之⽤。<br />
11. 學員可向本⾳樂中⼼申請修讀証明書(每張⼿續費$50)<br />
12. 學員及訪客應⼩⼼保管個⼈物品,如有任何財物損失,本公司概不負責。<br />
13. 本公司保留或修改以上守則之權利,所有學員必須遵守學員守則,⽽本公司將保留最終決定權。<br />

B.上課時間安排<br />
1. 為顧及學習進度,課程⼀般以每⼀星期⼀堂的⽅式進⾏。<br />
2. 如學員選擇彈性上課時間,每堂須預約時間,並在⼀個⽉內完成最少4堂課程。<br />
3. 除農曆假期及特別通知外,所有公眾假期⼀律照常上課。<br />
4. 學員不得擅⾃與導師更改上課時間。<br />
5. 學員需準時上課,遲到將不會補時。<br />
6. 各類⾳樂課程,如學員於翌⽉停課,請於最後⼀堂⾄少7天前通知本公司。<br />
7. 學員如需更改上課時間,必須⾄少上課前⼀天致電通知以便作出安排,否則將不予補課。<br />
8. 學員每⽉只可更改上課時間⼀次。<br />
C.繳付學費守則<br />
1. 學費以⽉費計算,視乎上課⽇⼦在該⽉份有四或五星期,如該⽉有五堂課程,學員則需繳交五堂學費。<br />
2. 學費可以現⾦、⽀票、EPS易辦事、轉數快#、銀⾏轉賬#、PayMe#、⽀付寶 Alipay HK# 、VISA#、 Mastercard#、WeChatPay# 及 美國運通信⽤卡 American Express#等⽅式繳付。<br />
3. 繳付學費注意事項：<br />
• 學員必須於每⽉課程最後⼀堂繳付下期全數學費。
• 如未能繳付全數學費的學員,亦必須繳付全數學費的⼀半⾦額為訂⾦作留位之⽤。( 亦必須於第⼆堂 前繳付其餘⼀半學費）
4. 根據以上守則,本公司有權拒絕未能依時繳付學費的學員上課。<br />
5. 學費⼀經繳交,恕不退還或轉讓他⼈。<br />
6. 如未能在限定⽇期前繳付,請盡早通知學院職員作安排,否則學院有權向學員收取$25⾏政費。<br />
# 只適⽤於部分分店⾨市,詳情請向店員查詢。<br />

D.請假安排
1. 如因事未能出席課堂,必須於上課前⼀⽇(營業時間內)致電請假,經本公司同事確認後,課堂可作補堂處 理。<br />
2. 如於當天即⽇提出請假,將不設補堂（病假除外）,所⽀付的學費亦將不會退還。<br />
3. 如需申請病假,必須於當天上課4⼩時前致電申請,並在下⼀次課堂登記時出示有關的證明,否則將不予 補堂。<br />
4. 每期課程,不論事假或病假學員最多只可請假⼀次,並必須於請假當天起三⼗天內作出補堂。<br />
5. 如學員因患病要停學⼀段時間,若有證明⽂件,該學員所餘下的課堂可作例外處理。<br />
E.補堂處理<br />
1. 補堂設有兩種⽅式<br />
A. 安排於上課⽇以外的⽇⼦補堂(建議於請假⽇該星期安排補堂以確保學習進度);<br />
B. 或於及後的課堂加時補課。<br />
2. 注意所有補堂有效期為1個⽉,需於請假⽇後1個⽉內提出申請。<br />
3. 如超過1個⽉仍未主動聯絡安排,即當放棄補堂處理,該課堂往後不會作出補堂安排,所⽀付的學費亦不 設退還。<br />
4. 補堂不得請假及更改時間,否則即當缺席處理,該課堂往後不會作出補堂安排,所⽀付的學費亦不設退 還。<br />
5. 凡補堂或調堂均不得順延下堂或當作下期課堂處理。<br />
6. 凡補堂或調堂,本公司有可能安排另⼀位導師上堂,或另⼀班別上課。<br />
7. 凡班制及⼩組課程學員如於指定上課時間缺席,作缺席處理,不予補堂,已繳交之學費恕不退回。<br />
8. 本公司保留調動上課時間、更換課室及導師之權利。<br />
9. 若導師有事需要請假,本公司會安排其他導師代或另⾏安排時間補課。<br />
10. 如學員要轉⾄其他分校上課,必須在原校完成所有課堂才可轉⾄新校。<br />
F.⼋號颱風及⿊⾊暴雨警告安排<br />
當⼋號或以上颱風警告信號或⿊⾊暴雨警告信號懸掛時,建議學員留在安全地⽅暫避。所有原定及進⾏中的
課堂將會停課或取消,本公司會作出補課安排。若天⽂台於下午七時後除下該訊號,則所有原定之課堂亦將
會停課或取消,本公司會作出補課安排。若天⽂台於下午七時或以前已除下該訊號,則原定之課堂將於公佈
兩⼩時後如常舉⾏。如學員決定不回來上課,本公司則不會安排補課。
*本公司有權保留任何修改權利⽽不會另⾏通知<br />
          </div>
        </el-col>
      </el-row>
    <fou-dialog :title="'新增聯絡人'" v-model:dialogValue="dialogValue" >
      <template #content>
                  <el-form  ref="formRef"  :model="dynamicValidateForm" >
            <el-button @click="addDomain"  color="#081F42">添加聯絡人</el-button>
             <div class="mt-[15px]">
                  <div class=" flex  justify-start">
                      <div v-for="(item,index) in dynamicValidateForm.domains" :key="index" class="w-[250px]  mr-10">
                              <el-form-item :prop="item.name"  > <el-input v-model="item.name" placeholder="聯絡人名稱(必填)" /></el-form-item>
                              <el-form-item :prop="item.relation" > <el-input v-model="item.relation" placeholder="與學生關係(必填)" /></el-form-item>
                              <el-form-item :prop="item.phone"> <el-input v-model="item.phone" placeholder="聯絡人聯絡電話(必填)" /></el-form-item>
                              <el-form-item :prop="item.homePhone" > <el-input v-model="item.homePhone" placeholder="住宅電話" /> </el-form-item>
                              <el-form-item :prop="item.address" > <el-input v-model="item.address" placeholder="地址" /> </el-form-item>
                              <el-button type="danger" v-if="index > 0" @click="delFamily(index)">刪除</el-button>
                      </div>
                  </div>
            </div>
      </el-form>
      </template>
      <template #footer>
                <el-button @click="dialogValue = false">取消</el-button>
          <el-button  @click="submitForm(formRef)"  color="#081F42">提交</el-button>
      </template>
    </fou-dialog>
    </div>
    <div v-if="isSuccess" class="font-bold text-3xl flex justify-center mt-[50px]">提交成功!</div>
  </div>
</template>

<script setup>
import { ref, reactive,onMounted, watch } from "vue";
import {message} from '@/common/function.js'
 import {studentType,addStudent,updateStudent} from '@/http/index.js'
const formRef = ref('')
let contact = ref([])
const submitForm = (formEl)=>{
  if (!formEl) return
  formEl.validate((valid)=>{
    if (valid) {
      dynamicValidateForm.domains.forEach(e=>{
        console.log(e);
        if (e.name == '') {
          message('請填寫姓名')
        }else
        if (e.relation == '') {
          message('請填寫與學生關係')
        }else
       if (e.phone == '') {
          message('請填寫聯繫電話')
        }else{
          contact.value = dynamicValidateForm.domains
          form.contact = JSON.stringify(dynamicValidateForm.domains)
          dialogValue.value = false
        }
      })
    }
  })
}
const addDomain = () => {
       if ( dynamicValidateForm.domains.length === 3) {
        return
      }
   dynamicValidateForm.domains.push({
          name: '',
          relation: '',
          phone: '',
          homePhone: '',
          address: '',
        })
}
const dynamicValidateForm = reactive({
  domains:[
    {
          name: '',//联系人名称(必填)
          relation: '',//与学生关系(必填)
          phone: '',//电话(必填)
          homePhone: '',//住宅电话
          address: '',//地址
    }
  ]
})
  const delFamily=(i)=> {
       dynamicValidateForm.domains.splice(i, 1);
    }

const ruleFormRef = ref('')
const form = reactive({
    school_id:localStorage.getItem('school_id'),
    name: "",
    mobile: "",
    username:'',
    password:'',
    email: "",
    address: "",
    ename: "",
    source:'',
    remark:'',
    sex: "",
    status: "",
    num:'',
    birthday:'',
    identity:'',
    student_type_id:'',
    education:'',
    relation:'',
    card_number:'',
    contact:'',
});
const rules = reactive({
  name: [{ required: true, message: "請輸入名字", trigger: ["blur",'change'] }],
  mobile: [{ required: true, message: "請輸入電話", trigger:  ["blur",'change']  }],
  username: [{ required: true, message: "請輸入登錄名", trigger:  ["blur",'change']  }],
  password: [{ required: true, message: "請輸入密碼", trigger:  ["blur",'change']  }],
  sex: [{ required: true, message: "請選擇性別", trigger:  ["blur",'change']  }],
  num: [{ required: true, message: "請輸入调课次数", trigger:  ["blur",'change']  }],
  student_type_id: [{ required: true, message: "請輸入學生類型", trigger:  ["blur",'change']  }],
  // card_number: [{ required: true, message: "請輸入卡號", trigger:  ["blur",'change']  }],
  contact: [{ required: true, message: "請添加联系人", trigger:  ["blur",'change']  }],
});
const dialogValue = ref(false);
const addPerson = () => {
  dialogValue.value = true;
};
const sexOptions = [
  {
    value: 1,
    label: '男',
  },{
    value: 2,
    label: '女',
  }
]
const statusOptions = [
  {
    value: 1,
    label: '正常',
  },{
    value: -1,
    label: '禁用',
  }
]
const isSuccess = ref(false)
const confirm = async (formEl,type) => {
  if (!formEl) return;
    formEl.validate(async (e)=>{
      if (e) {
        console.log(form);
        const data = await addStudent(form)
        if (data.code == 200) {
        message('添加學生成功')
        isSuccess.value = true
        }
      }
    })
};
defineExpose({
  // DialogCofirm,
});
const studentTypeList = ref([])
const studentTypes = async ()=>{
      let obj = {
        limit:100
      }
      const data = await studentType(obj)
      if (data.code == 200) {
        data.data.data.forEach(e=>{e.label = e.name,e.value=e.id})
        studentTypeList.value = data.data.data
      }else{
        message('獲取學生分類失敗')
      }
}

onMounted(() => {
  studentTypes()
})
</script>

<style lang='less'  scoped>
.button {
  color: #fff;
}
.box{
    padding: 20px;
}
</style>